*{
  ul,ol,li{
    list-style: none;
  }
}
nav>.row .col-lg-1{
  visibility:visible; 
}
section{
  height: 0;
  width:0;

>.row>.col-lg-2{
  position:absolute;;
  display: none;
  background-color: #fff;
  border:1px solid #FF6A00;
  >li{
    color:#333;
    >i{
      color:#ccc;
    }
  }
}
}
main{
  display: flex;
  height:750px;
  >.left{
    width: 50%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    >div{
      position: relative;
      height:560px;
      width:560px;
      cursor: none;
      >img{
        height:100%;
        width:100%;
        background-color: #FF6A00;
      }
      >.mask {
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.5;
        position: absolute;
        left: 36px;
        top: 95px;
        pointer-events: none;
        display: none;
    }
    }
  }
  >.right{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    padding:80px 0;
    >.top{
      height: 170px;
      border-bottom: 1px solid #b0b0b0;
      width:600px;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      >p:first-child{
        font-size: 24px;
      }
      >p:nth-child(2){
        font-size: 14px;
        color:#b0b0b0;
      }
      >p:nth-child(3){
        font-size: 14px;
        color:#FF6A00;
      }
      >div{
        >span{
          color:#FF6A00;
          font-size: 18px;
        }
        >del{
          font-size: 14px;
        color:#b0b0b0;
        }
      }
    }
    >.middle{
      box-sizing: content-box;
      height:42px;
      width:498x;
      padding:30px 50px 30px 10px;
      background-color:#FAFAFA ;
      border:1px solid #b0b0b0;
      display: flex;
      >.left{
        width:20px;
        height:100;
        text-align: center;
        line-height: 30px;
        >.iconfont{
          font-size: 20px;
        }
      }
      >.right{
        span{
          font-size: 13px;
          color:#FF6A00;
        }
        >p:last-child{
          color:#FF6A00;
          font-size: 13px;
        }
      }
    }
    >.bottom{
      box-sizing: content-box;
      height:86px;
      width:540px;
      padding:30px;
      background-color: #F9F9FA;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      >div{
        display: flex;
        justify-content: space-between;
        >p{
          text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
          &:first-child{
            width:400px;
          }
        }
      }
      >p{
        color:#FF6A00;
        font-size: 24px;
      }
    }
    >button{
      width:298px;
      height:52px;
      outline: none;
      border-radius: 0;
      background-color: #FF6A00;
      border:1px solid #FF6A00;
      color:#fff;
      font-size: 18px;
      &:hover{
       background-color:#F25807;
      }
    }
    >.enlarge {
      width: 400px;
      height: 400px;
      overflow: hidden;
      position: absolute;
      display: none;
      left: 0px;
      top: 94px;
      >img {
        width: 800px;
        height: 800px;
        position: absolute;
        left: 0;
        top: 0;
    }
  } 
  }
}
aside{
  display: none;
  justify-content: space-between;
  align-items: center;
  height:250px;
  width: 100%;
  padding:30px;
  background-color: #F5F5F5;
  >.left{
    height:100%;
    width:550px;
    display: flex;
    align-items: center;
    >div:first-child{
      width:64px;
      height:64px;
      color:#84C54D;
      line-height: 64px;
      >.iconfont{
        font-size: 64px;
      }
    }
    >div:last-child{
      width:486px;
      padding-left: 20px;
      >p:first-child{
        font-size: 24px;
      }
      >p:last-child{
        color:rgb(117, 117, 117);
        font-size: 14px;
      }
    }
  }
  >.right{
    width:400px;
    height:45px;
    >button{
      width:180px;
      height:38px;
      &:first-child{
        border:1px solid rgb(176, 176, 176);
        background-color:#F5F5F5 ;
        &:hover{
          border:1px solid #333;
          background-color: #fff;
        }
      }
      &:last-child{
        background-color: #FF6A00;
        border: 1px solid #FF6A00;
        color:white;
        &:hover{
          background-color: #F25807;
          border: 1px solid #F25807;
        }
      }
    }
  }
}
